<template>
	<view class="content">
		<!-- 头部栏 -->
		<view class="header">
			<view class="header-left">
				<image src="../../static/image/test-img/rool.jpg" @click="goDetail"></image>
			</view>
			<view class="header-center">
				<image src="../../static/image/index/logo.png"></image>
			</view>
			<view class="header-right">
				<view class="header_search">
					<image src="../../static/image/index/search.png"></image>
				</view>
				<view class="header_add">
					<image src="../../static/image/index/add.png"></image>
				</view>
			</view>
		</view>
		<!-- 好友消息 -->
		<view class="container container_top">
			<view class="container_left"> 
				<image src="../../static/image/test-img/boom.jpg"></image>
				<view class="tip">
					<text>1</text>
				</view>
			</view>
			<view class="container_center">
				<text class="friends_name">好友申请</text>
				<text class="friends_message">以下是好友申请，请你查阅</text>
			</view>
			<view class="container_right">
				<text class="time">9.12</text>
			</view>
		</view>
		<!-- 用户消息 -->
		<view class="container" :class="{active: currentIndex === index}" v-for="(item,index) in friends" :key="item.id" @click="handleClick(index)">
			<view class="container_left friends_container">
				<image :src="'../../static/image/test-img/'+item.imgurl"></image>
				<view class="tip">
					<text>{{item.tip}}</text>
				</view>
			</view>
			<view class="container_center">
				<text class="friends_name">{{item.name}}</text>
				<text class="friends_message">{{item.news}}</text>
			</view>
			<view class="container_right">
				<text class="time">{{changeTime(item.time)}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import data from '../../common/js/datas.js';
	import handleTime from '../../common/js/handleTime.js';
	export default {
		data() {
			return {
				friends:[],
				// 当前的索引值
				currentIndex:0
			}
		},
		onLoad() {
			this.getFriends()
		},
		methods: {
			getFriends(){
				this.friends = data.friends()
				// console.log(this.friends);
			},
			changeTime(date){
				return handleTime.handleTime(date)
			},
			// 点击切换样式
			handleClick(index){
				this.currentIndex = index
			},
			// 出发go页面
			goDetail(){
				uni.navigateTo({
					url:'../detail/detail'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: var(--status-bar-height);
		padding-bottom: 32rpx;
		.header{
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 750rpx;
			height: 88rpx;
			background: rgba(255,255,255,0.96);
			box-shadow: 0px 0.5px 0px 0px rgba(0,0,0,0.1);
			padding-top: var(--status-bar-height);
			position: fixed;
			top: 0;
			left: 0;
			z-index: 100;
			.header-left{
				width: 88rpx;
				height: 88rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				padding:  0 23rpx;
				image{
					width: 68rpx;
					height: 68rpx;
					border-radius: 16rpx;
				}
			}
			.header-center{
				width: 88rpx;
				height: 88rpx;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				margin-left: 56rpx;
				image{
					width: 88rpx;
					height: 42rpx;
				}
			}
			.header-right{
				display: flex;
				justify-content: center;
				align-items: center;
				.header_search{
					display: flex;
					justify-content: center;
					align-items: center;
					width: 88rpx;
					height: 88rpx;
					margin-left: 6rpx;
					image{
						width: 52rpx;
						height: 52rpx;
					}
				}
				.header_add{
					display: flex;
					justify-content: center;
					align-items: center;
					width: 88rpx;
					height: 88rpx;
					padding: 0 10rpx;
					image{
						width: 52rpx;
						height: 52rpx;
					}
				}
			}
		}
		
		.container_top{
			margin-top: 88rpx;
		}
		
		.active{
			background-color: rgba(243,244,246,1);
		}
		
		.container{
			display: flex;
			justify-content:space-between;
			align-items: center;
			padding: 20rpx 32rpx;
			width: 750rpx;
			box-sizing: border-box;
			.container_left{
				position: relative;
				box-sizing: border-box;
				width: 96rpx;
				height: 96rpx;
				background: #FFE431;
				border-radius: 24rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				image{
					width: 55.4rpx;
					height: 56.4rpx;
					background: #272832;
				}
				.tip{
					position: absolute;
					right: 0;
					top: 0;
					width: 48rpx;
					height: 36rpx;
					background: #FF5D5B;
					border-radius: 18rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					text{
						display: flex;
						justify-content: center;
						align-items: center;
						width: 28rpx;
						height: 34rpx;
						font-family: PingFangSC-Regular;
						font-size: 24rpx;
						color: #FFFFFF;
						letter-spacing: -0.82rpx;
						font-weight: 400;
					}
				}
			}
			.friends_container{
				background-color: #fff;
				image{
					width: 100%;
					height: 100%;
					border-radius: 24rpx;
				}
			}
			.container_center{
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				.friends_name{
					height: 50rpx;
					font-family: PingFangSC-Regular;
					font-size: 36rpx;
					color: #272832;
					letter-spacing: -1.24rpx;
					font-weight: 400;
				}
				.friends_message{
					width: 460rpx;
					height: 40rpx;
					font-family: PingFangSC-Regular;
					font-size: 28rpx;
					color: rgba(39,40,50,0.60);
					letter-spacing: -0.96rpx;
					font-weight: 400;
					text-overflow:ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}
			}
			.container_right{
				width: 66rpx;
				height: 48rpx;
				font-family: PingFangSC-Regular;
				font-size: 24rpx;
				color: rgba(39,40,50,0.40);
				letter-spacing: -0.82rpx;
				font-weight: 400;
			}
		}
	
	}	
</style>
